{extend name="main"}
{block name="style"}
<style type="text/css">
	body{overflow-y: scroll;}
	.amap-info-content{padding: 10px 20px 10px 10px;}
	.map-marker-icon{width: 32px;height: 32px;font-size: 2rem;}
	.amap-control.amap-geolocation{width: 40px !important;height: 40px !important;right: 40px !important; bottom: 40px !important; }
	.amap-geolocation img{width: 32px;height: 32px;}
	.input-with-select .el-select .el-input{width: 100px;}
	.el-input-group__prepend{border-radius: 0;}
	.el-input-group__append,.input-with-select .el-input__inner{border-radius: 0;border-color: #048CFC;}
	.el-input-group__append button.el-button{color: #FFF;border-color: #048CFC;background-color: #048CFC;border-radius: 0;}
	.search-fixed{
		width: 440px;
		position: fixed;
		left: 20px;
		top: 60px;
		bottom: 40px;
		z-index: 999;
	}
	.jobs-item{cursor: pointer;}
	.jobs-item:hover{box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);}
	.justify-content-flex-end{justify-content: flex-end;}
	.amap-icon img, .amap-marker-content img{width: 25px;height: 34px;}
	.el-input-group__append{background-color: #048CFC;}
	.el-input-group__append, .el-input-group__prepend{vertical-align: initial;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container=""/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="search-fixed wrap"
	@mousemove="search_input.focus=true"
	@mouseout="search_input.focus=false">
		<el-form :model="search" @submit.native.prevent="sendHtml">
			<el-input placeholder="搜索所选位置职位或企业" v-model="search.key" class="input-with-select">
			    <el-button native-type="submit" type="primary" slot="append" icon="el-icon-search"></el-button>
			</el-input>
		</el-form>
		<div class="flex bg-white p-2 border-bottom mt-2" v-show="search_input.focus || tableData.length">
			<div class="pointer px-2" 
			:class="{'text-primary':search.type=='jobs'}"
			@click.stop="setSearchType('jobs')">职位</div>
			<div class="pointer px-2" 
			:class="{'text-primary':search.type=='company'}"
			@click.stop="setSearchType('company')">企业</div>
			<div class="flex-1"></div>
			<el-dropdown @command="setRange" trigger="click">
			    <span class="el-dropdown-link pointer">
				    {{search.range=='1km'?'1km以内':'3km以内'}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item 
			    :icon="search.range=='1km'?'el-icon-check':'el-icon-placeholder'"
			    command="1km">1km以内</el-dropdown-item>
			    <el-dropdown-item 
			    :icon="search.range=='3km'?'el-icon-check':'el-icon-placeholder'" command="3km">3km以内</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="flex1 h-100 bg-white" v-infinite-scroll="pageHtml" style="overflow-y:auto;" v-show="search_input.focus || tableData.length">
			<div class="border-bottom jobs-item" v-for="(v,index) in tableData"
			@click="sendWindowInfo(v)">
				<div class="p-3" v-if="search.type=='jobs'">
					<div class="flex">
						<div class="flex-1">
							<a :href="'/jobs/'+v.id+'.html'" target="_blank"
							class="h6 mb-0 text-dark font-weight-600">{{v.title}}</a>
						</div>
						<div class="h6 text-FF586C flex flex-center">
							<div v-if="v.salary_min>0">
							<span v-if="v.jobs_salary_show_type">{{v.salary_min}}-{{v.salary_max}}元</span>
							<span v-else>{{v.salary_min}}-{{v.salary_max}}k</span>
							<span v-if="v.salary_year>12">·{{v.salary_year}}薪</span>
							</div>
							<div v-else>面议</div>
						</div>
					</div>
					<div class="flex py-1">
						<div class="flex-1">
							<div class="flex flex-center text-grey">
								<div>{{v.education}}</div>
								<div class="border-left border-grey py-1 mx-1"></div>
								<div>{{v.exp_level}}</div>
							</div>
						</div>
						<div>
							<div class="flex flex-center text-grey">
								<div v-if="v.distance>1000">{{(v.distance/1000).toFixed(2)}}km</div>
								<div v-else-if="v.distance<1000">&lt;1km</div>
								<div class="mx-2">·</div>
								<div class="text-right pointer text-FF8221" @click="toggleJobsCollection(v)" v-if="v.is_collection"><i class="el-icon-star-on mr-1"></i>取消收藏</div>
								<div class="text-right pointer text-grey" @click="toggleJobsCollection(v)" v-if="!v.is_collection"><i class="el-icon-star-off mr-1"></i>收藏</div>
							</div>
						</div>
					</div>
					<div class="flex py-1">
						<div class="flex-1">
							<a :href="'/company/'+v.company_id+'.html'" target="_blank" class="el-link el-link--primary text-dark">{{v.scompany_name?v.scompany_name:v.company_name}}</a>
						</div>
						<div class="text-grey">发布于{{v.friendly_create_time}}</div>
					</div>
					<div class="py-1" v-if="v.welfare.length>0">
						<el-tag type="parimary" size="mini" v-for="welfare in v.welfare" class="mr-2">{{welfare}}</el-tag>
					</div>
				</div>
				<div class="flex p-3" v-if="search.type=='company'">
					<div>
						<img :src="v.logo" width="60" height="60" class="border border-grey rounded">
					</div>
					<div class="flex-1 px-3">
						<a :href="'/company/'+v.id+'.html'" target="_blank">
							<div class="h6 text-dark font-weight-600">{{v.stitle?v.stitle:v.title}}</div>
						</a>
						<div class="pt-2">
							<div class="text-grey small">{{v.size_type}}丨{{v.industry}}</div>
						</div>
					</div>
					<div class="text-right text-grey">
						<a :href="'/company/'+v.id+'.html'" target="_blank">
							<div class="text-primary">在招职位<span class="px-1">{{v.jobs_sum}}</span>个</div>
						</a>
						<div v-if="v.distance>1000" class="pt-2">{{(v.distance/1000).toFixed(2)}}km</div>
						<div v-else-if="v.distance<1000" class="pt-2">&lt;1km</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  	<div v-if="amapConfig.status && amapConfig.js_status" v-loading="search.ajax">
  		<div id="map_container" :style="{width:winSize.w+'px',height:winSize.h+'px'}"></div>
  	</div>
</div>
<div style="display: none;">
	<div ref="infoWindow">
		<div class="flex p-3" v-if="search.type=='jobs'&&Find.id">
			<div class="flex-1 pr-3">
				<a :href="'/jobs/'+Find.id+'.html'" target="_blank">
					<div class="h6 text-0143B1">{{Find.title}}
					<span class="text-secondary ml-2 small">发布于{{Find.friendly_create_time}}</span>
					</div>
				</a>
				<div class="py-1" v-if="Find.welfare.length>0">
					<el-tag type="success" size="mini" v-for="welfare in Find.welfare" class="mr-2">{{welfare}}</el-tag>
				</div>
				<div class="py-1">
					<a :href="'/company/'+Find.company_id+'.html'" target="_blank" class="el-link el-link--primary">{{Find.scompany_name?Find.scompany_name:Find.company_name}}</a>
				</div>
			</div>
			<div>
				<div class="h6 text-FF586C flex justify-content-flex-end">
					<div v-if="Find.salary_min>0">
						<span>{{Find.salary_min}}-{{Find.salary_max}}k</span>
						<span class="text-danger" v-if="Find.salary_year>12">·{{Find.salary_year}}薪</span>
					</div>
					<div v-else>面议</div>
				</div>
				<div class="text-secondary text-right small">{{Find.education}}丨{{Find.exp_level}}</div>
				<div class="flex flex-center pt-2">
					<div v-if="Find.distance>1000">{{(Find.distance/1000).toFixed(2)}}km</div>
					<div v-else-if="Find.distance<1000">&lt;1km</div>
					<div class="mx-1">·</div>
					<div class="text-right pointer" @click="toggleJobsCollection(Find)" v-if="Find.is_collection"><i class="el-icon-star-on mr-1"></i>取消收藏</div>
					<div class="text-right pointer" @click="toggleJobsCollection(Find)" v-if="!Find.is_collection"><i class="el-icon-star-off mr-1"></i>收藏</div>
				</div>
			</div>
		</div>
		<div class="flex p-3" v-if="search.type=='company'&&Find.id">
			<div>
				<img :src="Find.logo" width="40" height="40">
			</div>
			<div class="flex-1 px-3">
				<a :href="'/company/'+Find.id+'.html'" target="_blank">
					<div class="h6 text-0143B1">{{Find.stitle?Find.stitle:Find.title}}</div>
				</a>
				<div class="py-1">
					<div class="text-secondary small">{{Find.size_type}}丨{{Find.industry}}</div>
				</div>
			</div>
			<div class="text-right">
				<a :href="'/company/'+Find.id+'.html'" target="_blank">
					<div class="text-primary">在招职位{{Find.jobs_sum}}</div>
				</a>
				<div v-if="Find.distance>1000">{{(Find.distance/1000).toFixed(2)}}km</div>
				<div v-else-if="Find.distance<1000">&lt;1km</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var amapConfig={
		status:{xycms:mapconfig name="status"/},
		server_status:{xycms:mapconfig name="server_status"/},
		js_status:{xycms:mapconfig name="js_status"/},
		js_key:'{xycms:mapconfig name="js_key"/}',
	};
</script>
<script type="text/javascript">
	var map=null,MarkerList=[];
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			Find:{},
			search_input:{
				focus:false
			},
			search:{
				type:'jobs',
				range:'3km',
				key:'',
				ajax:false,
				lng:null,
				lat:null,
				page:1,
				total:0,
				per_page:0,
				current_page:0,
				last_page:0,
			},
			amapConfig:amapConfig,
			winSize:{
				w:500,
				h:500
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			setSearchType(val){
				if (this.search.type==val)return;
				this.tableData=[];
				removeMarkerList();
				this.search.type=val;
				this.search.page=1;
				this.initHtml();
			},
			setRange(val){
				if (this.search.range==val)return;
				this.tableData=[];
				removeMarkerList();
				this.search.range=val;
				this.search.page=1;
				this.initHtml();
			},
			sendHtml(){
				this.tableData=[];
				removeMarkerList();
				this.search.page=1;
				this.initHtml();
			},
			pageHtml(){
				if (this.search.current_page>=this.search.last_page)return;
				this.search.page++;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				this.search.ajax=true;
				_this.sendGet({
					url:'/search/'+this.search.type,
					data:_this.search
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						if (ret.code === 0) {
							_this.search.total=ret.data.total;
							_this.search.per_page=ret.data.per_page;
							_this.search.current_page=ret.data.current_page;
							_this.search.last_page=ret.data.last_page;
							for (var i = 0; i < ret.data.data.length; i++) {
								_this.tableData.push(ret.data.data[i]);
								MarkerList.push(createMarkerEl(ret.data.data[i]));
								addMarkerList();
							}
						}else{
							XYBase.msg(ret.msg);
							_this.search.current_page=0;
							_this.search.last_page=0;
						}
					}
				});
			},
		})
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
if (amapConfig.status && amapConfig.js_status && amapConfig.js_key) {
	var url = '//webapi.amap.com/maps?v=2.0&callback=initAmap&key='+amapConfig.js_key;
	var jsapi = document.createElement('script');
	jsapi.charset = 'utf-8';
	jsapi.src = url;
	document.head.appendChild(jsapi);
}

function reloadWindowSize (argument) {
	var winW=$(window).width();
	var winH=$(window).height()-18;
	vm.winSize={
		w:winW<1140?1140:winW,
		h:winH-38,
	};
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
function initAmap() {
	if (map!==null)return;
	var param={
       resizeEnable: true,
       center:[116.397428, 39.90923],
       zoom:13
    };
    map = new AMap.Map('map_container', param);
    AMap.plugin('AMap.CitySearch',function(){
		showCityInfo();
    });
    AMap.plugin('AMap.Geolocation',function(){
        var geolocation = new AMap.Geolocation();
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
            	if (vm.search.lng||vm.search.lat)return;
		    	vm.search.lng=result.position.lng;
		    	vm.search.lat=result.position.lat;
    			moveSearchSpot(result.position);
            }
        });
    });
    map.on('click',function(ev) {
    	vm.search.lng=ev.lnglat.KL;
    	vm.search.lat=ev.lnglat.kT;
    	moveSearchSpot(ev.lnglat);
    })
}
var marker=null;
function setSearchSpot(position) {
	marker = new AMap.Marker({
        position: position,
        content:'<i class="el-icon-location map-marker-icon text-primary"></i>',
        offset: new AMap.Pixel(-13, -32),
        title:'搜索该位置附近的职位',
        draggable: true,
        cursor: 'move',
    });
    marker.setMap(map);
    marker.on('dragend',function(ev){
    	vm.search.lng=ev.lnglat.KL;
    	vm.search.lat=ev.lnglat.kT;
    	moveSearchSpot(ev.lnglat);
    });
    map.setCenter(position);
}
function moveSearchSpot(position) {
	vm.sendHtml();
	if (!marker)setSearchSpot(position);
	marker.setPosition(position);
    map.setCenter(position);
}
function showCityInfo() {
    var citysearch = new AMap.CitySearch();
    citysearch.getLocalCity(function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
            	if (vm.search.lng||vm.search.lat)return;
                var cityinfo = result.city;
                var citybounds = result.bounds;
                map.setBounds(citybounds);
                setSearchSpot(result.bounds.northEast);
            }
        }
    });
}
var infoWindow=null;
function createMarkerEl(data) {
	var markerEl=new AMap.Marker({
	    position: new AMap.LngLat(parseFloat(data.contacts_lng),parseFloat(data.contacts_lat)),
	    icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
	    title: data.title,
	    offset: new AMap.Pixel(-13, -30),
	    clickable:true,
	    extData:data
	});
	markerEl.on('click',function(ev){
        map.setCenter(ev.lnglat);
		vm.Find=ev.target._originOpts.extData;
		if (infoWindow)infoWindow.close();
	    infoWindow = new AMap.InfoWindow({
	        content: vm.$refs.infoWindow
	    });
	    infoWindow.open(map, ev.lnglat);
	});
	return markerEl;
}
function sendWindowInfo(data) {
	vm.Find=data;
	if (infoWindow)infoWindow.close();
    infoWindow = new AMap.InfoWindow({
        content: vm.$refs.infoWindow
    });
    infoWindow.open(map, new AMap.LngLat(parseFloat(data.contacts_lng),parseFloat(data.contacts_lat)));
}
function addMarkerList() {
	map.add(MarkerList);
}
function removeMarkerList() {
	if (infoWindow)infoWindow.close();
	infoWindow=null;
	vm.Find={};
	map.remove(MarkerList);
	MarkerList=[];
}
</script>
{/block}